<template>
	<view style="background-color: white;border-radius: 10rpx;padding: 30rpx;margin-bottom: 30rpx;"
		@click="detail(item.id)" v-for="item in list">
		<view class="" style="display: flex;justify-content: space-between;align-items: center;">
			<view class="">
				订单编号：{{item.order_no}}
			</view>
			<view class="" style="color: #F00505;" v-if="item.state == '1'">
				待支付
			</view>
			<view class="" style="color: #707070;" v-if="item.state == '2'">
				已支付
			</view>
			<view class="" style="color: #707070;" v-if="item.state == '3'">
				已退款
			</view>
		</view>
		<view class="" style="margin-top: 26rpx;display: flex;">
			<view class="" style="width: 256rpx;height: 152rpx;border-radius: 10rpx;">
				<image :src="item.image" style="width: 256rpx;height: 152rpx;border-radius: 10rpx;" mode="aspectFill">
				</image>
			</view>
			<view class="right">
				<view class="title">
					{{item.name}}
				</view>
				<view class="subtitle">
					{{item.introduce}}
				</view>
				<view class="price">
					<span style="font-size: 20rpx;margin-bottom: 5rpx;">¥</span>
					<span>{{item.pay_price}}</span>
				</view>
			</view>
			<!-- 	<view class="" style="margin-left: 30rpx;height: 152rpx;display: flex;flex-direction: column;justify-content: space-between;">
				<view class="" style="display: flex;align-items: center;justify-content: space-between;width: 350rpx;">
					<view class="" style="font-size: 36rpx;font-weight: bold;">
						七天速成
					</view>
					<view class="" style="font-size: 32rpx;">
						<span style="font-size: 20rpx;">¥</span>99.00
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;">
					<image src="/static/image/time.png" style="width: 24rpx;height: 24rpx;" mode=""></image>
					<view class="" style="margin-left: 10rpx;color: #717171;">
						2024-02期
					</view>
				</view>
				<view class="" style="display: flex;align-items: center;margin-left: -4rpx;">
					<image src="/static/image/place.png" style="width: 32rpx;height: 32rpx;" mode=""></image>
					<view class="" style="margin-left: 10rpx;color: #717171;">
						江苏昆山多威青训中心
					</view>
				</view>
			</view> -->
		</view>
		<view class="" v-if="item.time"
			style="margin-top: 40rpx;display: flex;justify-content: space-between;align-items: center;">

			<!-- <u-count-down :timestamp="item.time" style="color: #F00505;"></u-count-down> -->
			<view class="" style="color: #F00505;">
				<!-- {{item.timer}} -->
			</view>
			<view class="" @click.stop="pay(item.id)"
				style="width: 156rpx;height: 60rpx;border-radius: 10rpx;background-color: #5062A7;display: flex;justify-content: center;align-items: center;color: white;">
				去支付
			</view>
		</view>
		<view class="" v-if="item.state == '2'"
			style="margin-top: 40rpx;display: flex;justify-content: space-between;align-items: center;">
			<view class="" style="color: #F00505;">
				<!-- {{item.timer}} -->
			</view>

			<view class="" @click.stop="videoList(item.course_id)" v-if="item.is_show"
				style="width: 156rpx;height: 60rpx;border-radius: 10rpx;background-color: #5062A7;display: flex;justify-content: center;align-items: center;color: white;">
				视频列表
			</view>
		</view>
	</view>
</template>

<script setup lang="ts">
	import tools from '@/utils/tools'
	const props = defineProps({
		list: { type: Array as () => orderListType[] }
	})
	// 去支付
	const pay = (id : string) => {
		//tools.navTo('/pagesB/mine/mineStudent/detail?id=' + id)
		tools.navTo('/pagesB/order/pay?id=' + id)
	}
	const detail = (id : string) => {

		//课程详情

		tools.navTo('/pagesB/mine/mineStudent/studentDetail?id=' + id)

	}
	//视频列表
	const videoList = (course_id : string) => {

		tools.navTo('/pagesB/mine/mineStudent/videoList?course_id=' + course_id)

	}
</script>

<style scoped lang="scss">
	.right {
		margin-left: 20rpx;
		display: flex;
		width: 100%;
		flex-direction: column;
		justify-content: space-between;

		.title {
			font-size: 36rpx;
			font-weight: 500;
			width: 360rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			white-space: nowrap;
			color: #2C2C2C;
		}

		.subtitle {
			// width: calc(690rpx - 290rpx);
			width: 360rpx;
			color: #787878;
			font-size: 28rpx;
			overflow: hidden;
			text-overflow: ellipsis;
			display: -webkit-box;
			-webkit-line-clamp: 2; // 控制多行的行数
			-webkit-box-orient: vertical;

		}

		.price {
			width: 100%;
			display: flex;
			justify-content: flex-end;
			align-items: flex-end;
			color: #F00505;
			font-size: 32rpx;
			font-weight: bold;
		}
	}
</style>